<!doctype html>
<html ng-app="baseDirective">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../../build/common/base.css" rel="stylesheet">
<script type="text/javascript" src="../../build/common/base.js"></script>
<script type="text/javascript" src="../../build/common/ngEdit.js"></script>
<script type="text/javascript">
	var controller = [ '$scope', 'baseService', function(scope, baseService) {
		var instanceId, defId, taskId;
		try {
			instanceId = window.passData.instanceId;
			defId = window.passData.defId;
			taskId = window.passData.taskId;
		} catch (e) {
			instanceId = $.getParam('instanceId');
			defId = $.getParam('defId');
			taskId = $.getParam('taskId');
		}
		if (!taskId) {
			taskId = "";
		}
	//	scope.imageUrl =  __ctx + "/bpm/instance/flowImage?instId=" + instanceId + "&defId=" + defId + "&taskId=" + taskId;
		$("#flowImnage").attr("src", __ctx + "/bpm/instance/flowImage?instId=" + instanceId + "&defId=" + defId + "&taskId=" + taskId);

		//$("#flowImnage").attr("src",);
		var defer = baseService.postForm(__ctx + "/bpm/instance/getInstanceAndChildren", {
			id : instanceId
		});
		$.getResultData(defer, function(data) {
			scope.bpmInstance = data.bpmInstance;
			scope.bpmInstanceChildren = data.bpmInstanceChildren;
		})

		scope.showImage = function(id, title) {
			var conf = {
				title : title || "查看流程图",
				url : "/bpm/instance/instanceImageDialog.html?openedFlag=true&instanceId=" + id + "&taskId=" + taskId,
				height : '95%',
				width : '80%',
				passData : null,
				topOpen : false
			};
			conf.ok = function(index, innerWindow) {
				$.Dialog.close(innerWindow);
			}
			$.Dialog.open(conf);
		}

		if ($.getParam('openedFlag')) {
			scope.canotOpen = true;
		}

		//获取流程节点坐标
		var defer1 = baseService.postForm(__ctx + "/bpm/instance/getFlowImageInfo", {
			instanceId : instanceId,
			defId : defId,
			taskId : taskId
		});
		$.getResultData(defer1, function(data) {
			scope.imageInfo = data;
			window.setTimeout(function(){
				scope.initDialogs();
			},300)
		})
		scope.opinionConfig = {
			awaiting_check:{name:'待审批',color:"#ed4014",icon:"fa-spinner fa-pulse"},
			agree:	{name:'同意',color:"#19be6b",icon:"fa-check-circle"},
			oppose:	{name:'反对',color:"#ff9900",icon:"fa-close"},
			abandon:{name:'弃权',icon:"fa-unlink",color:"#808695"},
			reject:	{name:'驳回',icon:"fa-reply",color:"#ff9900"},
			rejectToStart:{name:'驳回到发起人',icon:"fa-reply-all",color:"#ff9900"},
			revoke:{name:'撤销',icon:"fa-stop",color:"#ed4014"},
			recall:{name:'撤回',icon:"fa-reply",color:"#ff9900"},
			revoker_to_start:{name:'撤回到发起人',icon:"fa-reply-all",color:"#ff9900"},
			signPass:{name:'会签通过',icon:"fa-check-circle",color:"#3c763d"},
			signNotPass:{name:'会签不通过',icon:"fa-close",color:"#ed4014"},
			signRecycle:{name:'会签回收',icon:"fa-check-circle",color:"#3c763d"},
			skip:{name:'跳过执行',icon:"fa-arrow-circle-right",color:"#3c763d"},
			manualEnd:{name:'人工终止',icon:"fa-stop",color:"#ed4014"},
			cancelled:{name:'任务取消',icon:"fa-arrow-circle-right",color:"#808695"}
		}
		scope.initDialogs = function(){
			
			var setting = {
					hide : {
						event : 'mouseleave',
						leave : false,
						fixed : true,
						delay : 100
					},
					style : {
						classes : 'qtip-default  qtip qtip-bootstrap qtip-shadow'
					}
				};
			
			for(let key in scope.imageInfo.opinionMap){
				setting.content = { text: $('#'+key) }
				
				$('#node'+key).qtip(setting);
			}
				
		}
		scope.assignInfo = function(info){
			if(!info){
				return "";
			}
			var msg = "";
			angular.forEach(info.split(","),function(item){
				if(!item){
					return;
				}
				if(msg){
					msg+="；";
				}
				var strs = item.split("-");
				var typeName ="";
				if(strs[0]==="user"){
					typeName="[用户]";
				}else if(strs[0]==="role"){
					typeName="[角色]";
				}else if(strs[0]==="group"){
					typeName="[组]";
				}else if(strs[0]==="org"){
					typeName="[组织]";
				}else if(strs[0]==="post"){
					typeName="[岗位]";
					if(strs[2]){
						return msg += typeName + strs[1] + "-" + strs[2];
					}
				}else if(strs[0]==="job"){
					typeName="[职称]";
				}
				msg += typeName + strs[1];
			});
			return msg;
		};
		scope.getTimeLag = function(time){
			return $.timeLag(time);
		}
		
	} ];

	
	
	function isValidate() {
		$.Dialog.close(window);
		return false;
	}
</script>
</head>
<body class="panel success" ng-controller="controller" style="overflow: auto;">
	<button ng-hide="canotOpen" class="btn btn-primary fa fa-image btn-xs" ng-if="bpmInstance.parentInstId" ng-click="showImage(bpmInstance.parentInstId)">查看父流程图</button>
	<button ng-hide="canotOpen" class="btn btn-primary fa fa-image btn-xs" ng-repeat="instance in bpmInstanceChildren" ng-click="showImage(instance.id,instance.subject+'流程图')">查看子流程 "{{instance.subject}}" 流程图</button>
	<br />
	
	<div>
		<img id="flowImnage">
		<div ng-repeat="(nodeId,layout) in imageInfo.nodeMap" id="node{{nodeId}}" class="flowNode" style="position:absolute;left:{{layout.x}}px;top:{{layout.y+20}}px;width:{{layout.width}}px;height:{{layout.height}}px;">
			<div ng-repeat="opinion in imageInfo.opinionMap[nodeId]" ng-show="$index ===imageInfo.opinionMap[nodeId].length-1">
				<div ng-if="opinionConfig[opinion.status]"  class="opinionStatus"  style="color: {{opinionConfig[opinion.status].color}}">
					<span class="fa {{opinionConfig[opinion.status].icon}}"></span> {{opinionConfig[opinion.status].name}}
				</div>
			</div>
		</div>
	</div>
	<div style="display: none;">
		<div ng-repeat="(nodeId,layout) in imageInfo.nodeMap" id="{{nodeId}}">
			<div ng-repeat="opinion in imageInfo.opinionMap[nodeId]">
				<ul class="list-group">
				  <a class="list-group-item">
					<h4 class="list-group-item-heading">{{opinion.approverName}} <span style="margin-left: 10px;color: {{opinionConfig[opinion.status].color}}" ><span class="fa {{opinionConfig[opinion.status].icon}}"></span> {{opinionConfig[opinion.status].name}}</span></h4>
    				<p class="list-group-item-text" ng-if="opinion.status != 'awaiting_check'">
						审批意见：{{opinion.opinion}} <br/> 操作时间：{{opinion.approveTime | date:"yyyy-MM-dd HH:mm:ss"}}
						<br/> 任务耗时：{{getTimeLag(opinion.durMs)}}
					</p>
					<p class="list-group-item-text" ng-if="opinion.status == 'awaiting_check'">
					任务后选人：{{assignInfo(opinion.assignInfo)}}
					<br/> 创建时间：{{opinion.createTime | date:"yyyy-MM-dd HH:mm:ss"}}
					</p>
				  </a>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>
<style>
.opinionStatus{
	margin-top: 6px;
	margin-left: 30px;
}

</style>